<template>
	<view class="pages">
		<h-nav-bar-yun title="医师认证" :fixed="true" @clickLeft="clickLeft"></h-nav-bar-yun>
		<view v-if="(status == -1 || status == 3)&&!loading">
			<view class="section">
				<view class="sec_input">
					<view class="sec_input_label left"><text>*</text>姓名</view>
					<view>
						<input class="sec_input_input" placeholder-class="sec_input_input_p" type="text" :value="userInfo?.name" maxlength="4" @input="onKeyInputName" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>身份证号</view>
					<view>
						<input class="sec_input_input" placeholder-class="sec_input_input_p" type="idcard" :value="userInfo?.idCard" maxlength="18" @input="onKeyInputIdCard" placeholder="请输入证件号码" />
					</view>
				</view>
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>手机号</view>
					<view>
						<input class="sec_input_input" placeholder-class="sec_input_input_p" type="number" :value="userInfo?.phone" maxlength="11" @input="onKeyInputMobile" placeholder="请输入手机号" />
					</view>
				</view>
			</view>
			<view class="section">
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>在职医院</view>
					<view>
						<input class="sec_input_input" placeholder-class="sec_input_input_p" type="text" :value="userInfo?.hospital_name" maxlength="20" @input="onKeyInputHospital" placeholder="请输入医院全称" />
					</view>
				</view>
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>科室</view>
					<view class="flex" @click="navigateTo('/pages-users/my-page/myOffice?type=open&arr='+userInfo?.rf_name)">
						<view :class="userInfo?.rf_name.length>0 ? 'sec_input_input' : 'sec_input_input_p'">{{ userInfo?.rf_name?.join('/') || '请选择科室' }}
						</view>
						<image src="@/static/index/right.png" class="sec_input_input_img"></image>
					</view>
				</view>
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>职称</view>
					<view class="flex" @click="showRank = true">
						<view :class="level ? 'sec_input_input' : 'sec_input_input_p'">{{ level || '请选择职称' }}
						</view>
						<image src="@/static/index/right.png" class="sec_input_input_img"></image>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>简介/擅长</view>
					<view class="flex" @click="navigateTo('/pages-users/my-page/myBrief?type=open&text='+userInfo?.adept)">
						<view :class="userInfo?.adept ? 'sec_input_input' : 'sec_input_input_p'">{{ userInfo?.adept || '请输入简介/擅长' }}
						</view>
						<image src="@/static/index/right.png" class="sec_input_input_img"></image>
					</view>
				</view>
				<view class="sec_input">
					<view class="sec_input_label"><text>*</text>个人标签</view>
					<view style="display: flex;justify-content: flex-end;align-items: baseline;" @click="navigateTo('/pages-users/my-page/myLabel?type=open&arr='+userInfo?.new_labels)">
						<view v-if="userInfo?.new_labels.length==0" class="sec_input_input_p">请输入个人标签</view>
						<view v-if="userInfo?.new_labels.length>0" class="flex_end" style="max-width: 300rpx;">
							<view class="tagItem mar-l-16" v-for="(item, index) in userInfo?.new_labels" :key="index">{{ item }}</view>
						</view>
						<image src="@/static/index/right.png" class="sec_input_input_img"></image>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="sec_title"><text>*</text>请上传（医师职业证书）</view>
				<view class="sec_box flex">
					<view class="sec_box_img" @click="upImgCer(0)">
						<image class="sec_box_img_img" mode="aspectFit" :src="userInfo?.doctor_practicing_certificate[0]" v-if="userInfo?.doctor_practicing_certificate[0]"></image>
						<view class="sec_box_img_add" v-else>
							<image src="@/static/index/add.png"></image>
						</view>
						<view class="sec_box_img_bot">第一页</view>
					</view>
					<view class="sec_box_img" @click="upImgCer(1)">
						<image class="sec_box_img_img" mode="aspectFit" :src="userInfo?.doctor_practicing_certificate[1]" v-if="userInfo?.doctor_practicing_certificate[1]"></image>
						<view class="sec_box_img_add" v-else>
							<image src="@/static/index/add.png"></image>
						</view>
						<view class="sec_box_img_bot">第二页</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="sec_title"><text>*</text>请上传（医师资格证书）</view>
				<view class="sec_box flex">
					<view class="sec_box_img" @click="upImgCer(2)">
						<image class="sec_box_img_img" mode="aspectFit" :src="userInfo?.doctor_qualification[0]" v-if="userInfo?.doctor_qualification[0]"></image>
						<view class="sec_box_img_add" v-else>
							<image src="@/static/index/add.png"></image>
						</view>
						<view class="sec_box_img_bot">第一页</view>
					</view>
					<view class="sec_box_img" @click="upImgCer(3)">
						<image class="sec_box_img_img" mode="aspectFit" :src="userInfo?.doctor_qualification[1]" v-if="userInfo?.doctor_qualification[1]"></image>
						<view class="sec_box_img_add" v-else>
							<image src="@/static/index/add.png"></image>
						</view>
						<view class="sec_box_img_bot">第二页</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="sec_title">上传证书示例</view>
				<view class="sec_box flex">
					<view class="sec_box_img">
						<image class="sec_box_img_img" src="@/static/index/zsa.png"></image>
					</view>
					<view class="sec_box_img">
						<image class="sec_box_img_img" src="@/static/index/zsb.png"></image>
					</view>
				</view>
				<view class="sec_text">我们郑重承诺对您的个人资料严格保密，提交成功后我们将于24小时内进行审核。</view>
			</view>
			<view class="sec_agree" @click="agree = !agree">
				<image v-if="!agree" class="sec_agree_g" src="@/static/index/goua.png"></image>
				<image v-if="agree" class="sec_agree_g" src="@/static/index/goub.png"></image>
				<view class="sec_agree_t">我已阅读并同意<text @click.stop="navigateTo(`/pages-users/common-agreement/index?type=1`)">《服务协议》</text
          ></view
        >
      </view>
      <h-sheet :show="showRank" :actions="actions" @close="rankClear" @select="rankSelect">
      </h-sheet>
      <h-line height="168"></h-line>
      <view class="foot">
        <view class="foot_btn" @click="submit">提交审核</view>
      </view>
    </view>
    <view v-if="status == 0">
      <view class="audit">
        <view class="audit_box">
          <image class="audit_box_img" src="@/static/index/audit.png"></image>
          <view class="audit_box_t">已提交审核</view>
          <view class="audit_box_b">本次审核预计在1-7个工作日内完成，请您耐心等待</view>
        </view>
      </view>
    </view>
    <view v-if="status == 1">
      <view class="audit">
        <view class="audit_box">
          <image class="audit_box_img" src="@/static/images/nonea.png"></image>
          <view class="audit_box_b">您已完成医师认证</view>
          <view class="audit_box_btn" @click="navigateTo('/pages-users/my-page/edit-userinfo')"
            >查看个人信息</view
          >
        </view>
      </view>
    </view>
    <view v-if="status == 2">
      <view class="section">
        <view class="sec_wei">
          <image class="sec_wei_img" src="@/static/index/wei.png"></image>医师认证审核未通过
        </view>
        <view class="sec_wei_box">
          <!--<view class="sec_l">1、身份证号码格式错误；</view>
					<view class="sec_l">2、在职医院次查询不到任职信息；</view>
					<view class="sec_l">3、职业医师资格证书模糊不清；</view>-->
          <view class="sec_l">{{ reason_rejection }}</view>
        </view>
      </view>
      <h-line height="168"></h-line>
      <view class="foot">
        <view class="foot_btn" @click="toAgain">再次提交审核</view>
      </view>
    </view>
    <h-login ref="login"></h-login>
    <h-modal
      :show="draftShow"
      titlea="您编辑的信息未提交，离开数据"
      titleb="将会丢失，是否确认返回"
      leftBtn="直接返回"
      rightBtn="保存后返回"
      @clear="navigateBack"
      @bind="saveDraft(), navigateBack()"
    ></h-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { formatDate } from '@/utils/utils'
import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { getDoctorLevel, getDoctorAudit, getDoctorCaogao } from '@/api/business'
import { doctorInfo } from '@/api/home'
import { uploadApi } from '@/utils/upLoad'
import { useMemberStore } from '@/stores'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const showRank = ref(false)
const status = ref(-1)
const userInfo = ref({
  name: '',
  phone: '',
  idCard: '',
  hospital_name: '',
  rf_name: [],
  type: '',
  doctor_practicing_certificate: ['', ''],
  doctor_qualification: ['', ''],
  new_labels:[],
  adept:""
})
const isUpdate = ref(false)
const reason_rejection = ref('')
const actions = ref([])
const agree = ref(false)
const draftShow = ref(false)
const level = ref('')
const isSubmit = ref(false)
const isOne = ref('')
const loading = ref(true)
onLoad((o) => {
  if (o?.isIndex) {
    isOne.value = o?.isIndex
  }
  getDoctorLevelList()
  getDraft()
  getCaoGao()
  upInfo()
})
onShow(() => {})
onReady(() => {})
function upInfo(){
  uni.$on('updateTag',(res) =>{
  	isUpdate.value = true
    userInfo.value.rf_name=res
  })
  uni.$on('updateGraph',(res) =>{
  	isUpdate.value = true
    userInfo.value.adept=res
  })
  uni.$on('updateLabel',(res) =>{
  	isUpdate.value = true
    userInfo.value.new_labels=res
  })
}
async function getCaoGao() {
	
}
async function getDraft() {
  const res = await doctorInfo()
  const s = res?.data?.is_apply_audit
  status.value = s
	loading.value=false
  if (s == 2) {
    reason_rejection.value = res?.data?.reason_rejection
  }
  const ress = await getDoctorCaogao()
  if(ress.data){
    var data = {
      name: ress?.data?.name,
      idCard: ress?.data?.idCard,
      phone: ress?.data?.phone,
      hospital_name: ress?.data?.hospital_name,
      rf_name: ress?.data?.rf_name||[],
      doctor_practicing_certificate: ress?.data?.doctor_practicing_certificate,
      doctor_qualification: ress?.data?.doctor_qualification,
      level_id: ress?.data?.level_id,
	  new_labels:ress?.data?.new_labels||[],
	  adept:ress?.data?.adept||""
    }
    console.log(data,"2111111111")
    userInfo.value = data
    level.value = ress?.data?.level
  }else{
  	var data = {
      name: res?.data?.name,
      idCard: res?.data?.idCard,
      phone: res?.data?.phone,
      hospital_name: res?.data?.hospital_name,
      rf_name: res?.data?.rf_name||[],
      doctor_practicing_certificate: res?.data?.doctor_practicing_certificate,
      doctor_qualification: res?.data?.doctor_qualification,
      level_id: res?.data?.level_id,
      type: 1,
	  new_labels:res?.data?.new_labels||[],
	  adept:res?.data?.adept||""
    }
    console.log(data,"5555555555")
    userInfo.value = data
    level.value = res?.data?.level
  }
}
async function saveDraft() {
  if (isSubmit.value) {
    return false
  }
  //保存草稿
  const res = await getDoctorAudit({
    name: userInfo.value.name,
    idCard: userInfo.value.idCard,
    phone: userInfo.value.phone,
    hospital_name: userInfo.value.hospital_name,
    rf_name: userInfo.value.rf_name,
    doctor_practicing_certificate: userInfo.value.doctor_practicing_certificate,
    doctor_qualification: userInfo.value.doctor_qualification,
    level_id: userInfo.value.level_id,
    type: 1,
	new_labels:userInfo.value.new_labels,
	adept:userInfo.value.adept
  })
}
const isAgain = ref(false)
function toAgain() {
  status.value = -1
  isAgain.value = true
}

function clickLeft() {
  if (isUpdate.value) {
    draftShow.value = true
  } else {
    if (isAgain.value) {
      if (status.value == 2) {
        navigateBack()
      } else {
        status.value = 2
      }
    } else {
      if (isSubmit.value) {
        if (isOne.value) {
          uni.switchTab({
            url: '/pages/index/index',
          })
        } else {
          uni.switchTab({
            url: '/pages/my/index',
          })
        }
      } else {
        navigateBack()
      }
    }
  }
}
async function getDoctorLevelList() {
  const res = await getDoctorLevel()
  var list = res?.data || []
  var arr = []
  for (var i in list) {
    arr.push({
      name: list[i].name,
      value: list[i].id,
    })
  }
  actions.value = arr
}

function onKeyInputName(e) {
  userInfo.value.name = e.detail.value
  isUpdate.value = true
}

function onKeyInputMobile(e) {
  userInfo.value.phone = e.detail.value
  isUpdate.value = true
}

function onKeyInputIdCard(e) {
  userInfo.value.idCard = e.detail.value
  isUpdate.value = true
}

function onKeyInputHospital(e) {
	nextTick(() => {
		userInfo.value.hospital_name = e.detail.value.replace(/[^\u4e00-\u9fa5]/g,'');
	})
  	isUpdate.value = true
}

function onKeyInputOffice(e) {
  userInfo.value.rf_name = e.detail.value
  isUpdate.value = true
}

function rankSelect(e) {
  level.value = e.name
  userInfo.value.level_id = e.value
  isUpdate.value = true
}
function rankClear() {
  showRank.value = false
  isUpdate.value = true
}

function upImgCer(num) {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: async function (res) {
      const url = await uploadApi(res.tempFilePaths[0])
      if (num == 0) {
        userInfo.value.doctor_practicing_certificate[0] = url
      } else if (num == 1) {
        userInfo.value.doctor_practicing_certificate[1] = url
      } else if (num == 2) {
        userInfo.value.doctor_qualification[0] = url
      } else if (num == 3) {
        userInfo.value.doctor_qualification[1] = url
      }
      isUpdate.value = true
    },
    fail() {
      
    },
  })
}
async function submit() {
  if (!token) {
    login.value.open()
    return false
  }
  if (!userInfo.value.name) {
    showToast('请输入姓名')
    return false
  }
  if (userInfo.value.name.length < 2) {
    showToast('姓名最少输入两个字')
    return false
  }
  if (!userInfo.value.idCard) {
    showToast('请输入身份证号')
    return false
  }
  if (
    !/^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/.test(
      userInfo.value.idCard,
    )
  ) {
    showToast('请输入正确的身份证号')
    return false
  }
  if (!userInfo.value.phone) {
    showToast('请输入手机号')
    return false
  }
  if (!/^1[0-9]{10}$/.test(userInfo.value.phone)) {
    showToast('请输入正确的手机号')
    return false
  }
  if (!userInfo.value.hospital_name) {
    showToast('请输入医院名称')
    return false
  }
  if (userInfo.value.hospital_name.length < 2) {
    showToast('医院名称最少输入两个字')
    return false
  }
  if (userInfo.value.rf_name.length==0) {
    showToast('请输入科室')
    return false
  }
  if(!userInfo.value.adept){
    showToast('请输入简介/擅长')
    return false
  }
  if(userInfo.value.new_labels.length==0){
    showToast('请设置个人标签')
    return false
  }
  if (
    !userInfo.value.doctor_practicing_certificate[0] ||
    !userInfo.value.doctor_practicing_certificate[1]
  ) {
    showToast('请上传医师职业证书')
    return false
  }
  if (!userInfo.value.doctor_qualification[0] || !userInfo.value.doctor_qualification[1]) {
    showToast('请上传医师资格证书')
    return false
  }
  if (!agree.value) {
    showToast('请先勾选协议')
    return false
  }
  const res = await getDoctorAudit({
    name: userInfo.value.name,
    idCard: userInfo.value.idCard,
    phone: userInfo.value.phone,
    hospital_name: userInfo.value.hospital_name,
    rf_name: userInfo.value.rf_name,
    doctor_practicing_certificate: userInfo.value.doctor_practicing_certificate,
    doctor_qualification: userInfo.value.doctor_qualification,
    level_id: userInfo.value.level_id,
    type: 2,
	new_labels:userInfo.value.new_labels,
	adept:userInfo.value.adept
  })
  isSubmit.value = true
  if (res.code == 200) {
    status.value = 0
    isAgain.value = false
  }else{
  	showToast(res.message)
  }
  isUpdate.value = false

  //		navigateTo(`/pages-user/tool-real/real-2?info=${JSON.stringify(userInfo.value)}`)
  //	 	校验摄像头权限是否开启
  //	     uni.getAppAuthorizeSetting({
  //	         success: (res) => {
  //	             console.log(res);
  //	             if (!res.authSetting['scope.camera']) {
  //	                 uni.authorize({
  //	                     scope: 'scope.camera',
  //	                     success: () => {
  //	                        navigateTo(`/pages-user/tool-real/real-2?info=${JSON.stringify(userInfo.value)}`)
  //	                     },
  //	                     fail: () => {
  //	                         showToast('请打开摄像头权限')
  //	                     }
  //	                 })
  //	             } else {
  //	                navigateTo(`/pages-user/tool-real/real-2?info=${JSON.stringify(userInfo.value)}`)
  //	             }
  //	         }
  //	     })
}
</script>
<style>
page {
  background: #f5f6f8;
}
.sec_input_input_p {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #aaaaaa;
  line-height: 120rpx;
}
</style>
<style lang="scss" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex_end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.clear:after {
  /*START 真正起到清除浮动的代码*/
  content: '';
  display: block;
  clear: both;
  /*END 真正起到清除浮动的代码*/
  height: 0;
}

.clear {
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: right;
}

.audit {
  width: 100%;
  height: 75vh;
  display: flex;
  flex-direction: row;
  /* 子元素横向排列 */
  justify-content: center;
  /* 相对父元素水平居中 */
  align-items: center;
  .audit_box {
    text-align: center;
    .audit_box_img {
      width: 246rpx;
      height: 200rpx;
    }
    .audit_box_t {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
      line-height: 42rpx;
      padding: 20rpx 0;
    }
    .audit_box_b {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
      line-height: 37rpx;
    }
    .audit_box_btn {
      width: 360rpx;
      height: 88rpx;
      background: #00c1b9;
      border-radius: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 88rpx;
      text-align: center;
      margin: 30rpx auto;
    }
  }
}

.over_dian {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 168rpx;
  background: #ffffff;
  .foot_btn {
    width: 702rpx;
    height: 88rpx;
    background: #00c1b9;
    border-radius: 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 12rpx auto;
  }
}

.sec_agree {
  padding: 30rpx;
  text-align: center;
  display: flex;
  flex-direction: row;
  /* 子元素横向排列 */
  justify-content: center;
  /* 相对父元素水平居中 */
  align-items: center;
  .sec_agree_g {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }
  .sec_agree_t {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #aaaaaa;
    line-height: 37rpx;
    text {
      color: #00c1b9;
    }
  }
}

.section {
  width: 702rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 0 20rpx;
  overflow: hidden;
  margin: 20rpx auto 0;
  .sec_wei {
    border-bottom: 1rpx solid #e8e8e8;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #e75e56;
    line-height: 72rpx;
    .sec_wei_img {
      width: 26rpx;
      height: 26rpx;
      float: left;
      margin: 20rpx 10rpx 20rpx 0;
    }
  }
  .sec_wei_box {
    padding-top: 30rpx;
    height: 218rpx;
    .sec_l {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
      line-height: 48rpx;
    }
  }
  .sec_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #202020;
    line-height: 40rpx;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
    text {
      color: #cb5000;
    }
  }
  .sec_input {
    border-bottom: 1rpx solid #f1f1f1;
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .sec_input_label {
      line-height: 80rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
      text {
        color: #cb5000;
      }
    }
    .sec_input_input_img {
      width: 32rpx;
      height: 32rpx;
      float: right;
    }
    .sec_input_input {
      width: 450rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: right;
      float: right;
      overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
    }
    .sec_input_input_p {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #aaaaaa;
      line-height: 80rpx;
      overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
    }
  }
  .sec_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #aaaaaa;
    line-height: 37rpx;
    padding-bottom: 30rpx;
  }
  .sec_box {
    padding-bottom: 30rpx;
    .sec_box_img {
      width: 321rpx;
      height: 250rpx;
      background: #f5f6f8;
      border-radius: 10rpx;
      position: relative;
      .sec_box_img_img,
      .sec_box_img_add {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .sec_box_img_add {
        display: flex;
        flex-direction: row;
        /* 子元素横向排列 */
        justify-content: center;
        /* 相对父元素水平居中 */
        align-items: center;
        box-sizing: border-box;
        padding-bottom: 50rpx;
        image {
          width: 66rpx;
          height: 66rpx;
        }
      }
      .sec_box_img_bot {
        width: 321rpx;
        height: 50rpx;
        background: rgba(32, 32, 32, 0.3);
        border-radius: 0rpx 0rpx 10rpx 10rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 50rpx;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}

  .tagItem {
    text-align: center;
    // line-height: 1;
    background: #d6fcfb;
    border-radius: 20rpx;
    min-width: 100rpx;
    height: 46rpx;
    margin-bottom: 10rpx;
    padding: 5rpx 20rpx;
    // box-sizing: border-box;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #44d3ce;
  }
</style>